css 要素を上に重ねる方法

https://scrapbox.io/files/61343a88ede445001d725ff0.jpeg

画像や半透明の要素を、他の要素の上に重ねたい事がある。

基本的な方法をここに記載する。

Keyword

position: relative

position: absolute

z-index

top, left

opacity

以下のようにするためにはどのようなcssを記述すれば良いか？

答えは以下のようなコードにする

code: html

<div class="relative">

<img src="./img.png" />

<p class="absolute">文字(absolute)</p>

</div>

code: css

.relative {

/** 親要素を「relative」にする！！ */

position: relative;

}

.absolute {

/** 小要素で移動させたいものは「absolute」にする */

position: absolute;

/** top, leftなどで位置を移動させれる。配置基準は親要素の位置。 */

top: 5%;

left: 5%;

/** 上に重ねたいなら、z-indexで順序を決めないといけない。数値が大きい方が上に重なる */

z-index: 10;

/** 後は適当に */

background: white;

color: black;

}

おまけ：上に重ねた要素の背景を半透明にしたい時

code: css

...

.absolute {

...

/** 透明度0 ~ 1の間で指定する */

opacity: 0.5;

}